<template>
	<view>
		<uni-row>
			<!-- offset表示左右边距 -->
			<uni-col :span="4" :offset="10" style="margin-top: 22px;margin-bottom:16.67px;">
				<view class = 'ava'>
				<!-- 对钩图形 -->	
				<text class="ava-text">!</text>
				<!-- <image src="../../static/编组 2@2x.png" class="pickture"></image> -->
				</view>
			</uni-col>
		</uni-row>
		<uni-row>
			<!-- offset表示左右边距 -->
				<uni-col :span="4" :offset="10">
					<text class="word">预约成功</text>
				</uni-col>
			</uni-row>
		<uni-card style="margin-top:30px;" @click="toPersonal_zheng">
			<uni-row>
				<uni-col :span="2">		
					<view class = 'ava2'>
					<!-- 扫码图形 -->
						<text class="ava2-text">#</text>
					</view>
				</uni-col>
				<uni-col :span="18" :offset="2" style="margin-top: 14px;margin-bottom:14px;" >
					<view>
						<text class="word2" >扫码入园</text><br>
						<text class="word2.1">Scan the QR code to enter the park</text>
					</view>			
				</uni-col>				
			</uni-row>
		</uni-card>
		<text class="word2.2" style="margin-left: 12px;">预约信息</text>
		<uni-card style="margin-top: 8px;margin-left: 12px;margin-right: 12px;margin-bottom: 35px;">
			<uni-row>
				<text class="word">姓名：{{ mperson[0].personal1.name }}</text><br /><br />
				<text class="word">证件类型：{{ mperson[0].personal1.card_type }}</text><br /><br />
				<text class="word">证件号码：{{ mperson[0].personal1.card }}</text><br /><br />
				<text class="word">手机号码：{{ mperson[0].personal1.phone }}</text><br /><br />
				<text class="word">同行儿童数：{{mperson[0].personal1.children_name}}</text><br /><br />
				<text class="word">同行成人：{{mperson[0].personal1.aduit}}</text><br /><br />
			</uni-row>
		</uni-card>
		<!-- <button @click="onClickButton">
					type ="primary"表示默认按钮类型与颜色 -->
					<!-- <text class="word3">查看入园凭证</text></button>
					 <br /> -->
		<button  @click="onClickButton1">
			 <text class="word3">取消预约</text></button>
    <button  @click="onClickButton2" style="margin-top: 10px">
      <text class="word3">返回首页</text></button>

	</view>
</template>

<script setup>
import {ref} from 'vue'
import data from '../../data/y_data.json'
let mperson=ref(data.record)
let onClickButton1 = function() {
  uni.showModal({
    title: '提示',
    content: '确定要取消预约吗？',
    success: (res) => {
      if (res.confirm) {
        // 执行取消预约的API调用
        console.log('预约已取消');
        // 清除本地存储中的数据
        uni.removeStorage({
          key: 'userData',
          success: (res) => {
            uni.reLaunch({
              url: "/pages/apointment/index"
            })
          }
        })
}}})}
	let onClickButton2 = function() {
    uni.reLaunch({
      url:'/pages/apointment/index'
    })
	}
let toPersonal_zheng = function (){
  uni.navigateTo({
    url:'personal-zheng'
  })
}
</script>

<style scoped>
	.ava{
		width: 53.33px;
		height: 53.33px;
		background: #8DCB6D;
		border-radius: 50%;
		outline-offset: 22px;
		text-align: center;	
	}
	.ava-text{
		font-weight: 700;
		font-size: 35px;
		text-align: center;
		color: #FFFFFF;
		line-height: 53.33px;
	}
	.word{
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.ava2{
		width: 32px;
		height: 32px;
		background: #8DCB6D;
		border-radius: 50%;
		/* line-height: 32px; */
		text-align: center;
		margin-top: 21px;
		margin-bottom:7px;
	}
	.ava2-text{
		font-weight: 700;
		font-size: 14px;
		color: #FFFFFF;
		line-height: 32px; 
	}
	.word2{
		font-family: PingFangSC;
		font-weight: 500;
		font-size: 15px;
		color: #05261B;
		letter-spacing: 0;		
	}
	.word2.1{
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #5F5F5F;
		letter-spacing: 0;
	}
	.word2.2{
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.button1{
		width: 351px;
		height: 45px;
		background: #fff;
		border-radius: 25px;
	}
  button{
    margin:0 20px;
    height: 45px;
    background: #8DCB6D;
    border-radius: 25px;
  }
	.word3{
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 17px;
		color: #FFFFFF;
		letter-spacing: 0;
	}
</style>